<template>
    <div>
      <el-row style="padding-top: 20px">
        <el-col :span="8" offset="4"><div class="grid-content">
          <img src="../../assets/健身icon.png" height="25" width="25"/>
          <span style="font-size: 20px;cursor:pointer;">健身视频</span>
          <a style="color: darkgrey;font-size: 13px">video</a>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span style="color: darkgrey;font-size: 15px">随时健身</span>
          <el-divider direction="vertical"></el-divider>
          <span style="color: darkgrey;font-size: 15px">居家运动</span>
          <el-divider direction="vertical"></el-divider>
          <span style="color: darkgrey;font-size: 15px" >身材管理</span>
        </div></el-col>
        <el-col :span="4" offset="1"><div class="grid-content ">
          <el-input
          placeholder="输入视频关键词搜索"
          suffix-icon="el-icon-search"
          v-model="input1">
        </el-input></div></el-col>
      </el-row>


      </div>
</template>

<script>
    export default {
        name: "VideoSearch"
    }
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .bg-purple {
    background: #d3dce6;
  }

  #search-input{
    box-sizing: border-box;
  }
</style>
